<template>
    <!--定义表格-->
    <BasicTable @register="registerTable" :expandedRowKeys="expandedRowKeys" @expand="handleExpand">
        <!--插槽:table标题-->
        <template #tableTitle>
            <a-button type="primary" @click="onReflashWxBotData" preIcon="ant-design:plus-outlined"> 刷新机器人群组</a-button>
        </template>

        <template #expandedRowRender>
            <BasicTable bordered size="middle" rowKey="id" :canResize="false" :columns="innerColumns"
                :dataSource="innerData" :pagination="false">

                <template #avatarRenderer="{ text }">
                    <Image
                        :src="text"
                        :preview="true" height="150px" width="150px" />
                </template>

            </BasicTable>
        </template>

        <!--操作栏-->
        <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" />
        </template>
    </BasicTable>
</template>


<script setup lang="ts">
import { ref } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { list, reflashWxBotData } from './WXBotGroup.api';
import { Avatar, Tag, Tooltip, Image } from 'ant-design-vue';
//接口url
const url = {
    list: '/test/order/orderList',
    delete: '/test/order/delete',
    deleteBatch: '/test/order/deleteBatch',
    customerListByMainId: '/test/order/listOrderCustomerByMainId',
};
// 展开key
const expandedRowKeys = ref<any[]>([]);
// 选择key

// 子表数据
const innerData = ref<any[]>([]);

//定义表格列字段
const columns: BasicColumn[] = [
    {
        title: '微信群号',
        dataIndex: 'groupWxid',
        key: 'groupWxid',
    },
    {
        title: '群名',
        dataIndex: 'nick',
        key: 'nick',
    },
    {
        title: '群成员数',
        dataIndex: 'groupMemberNum',
        key: 'groupMemberNum',
    
    },
    {
        title: '群主wxid',
        dataIndex: 'groupManger',
        key: 'groupManger',

    },
];
/** useListPage 是整个框架的核心用于表格渲染，里边封装了很多公共方法；
 * 平台通过此封装，简化了代码，支持自定义扩展*/
// 通过hook useListPage渲染表格（设置dataSource、columns、actionColumn等参数）
const { tableContext } = useListPage({
    designScope: 'wxbot-group',
    tableProps: {
        title: '机器人通讯录',
        api: list,
        columns: columns,
        showActionColumn: false,
        actionColumn: {
            width: 120,
        },
    },
});

// BasicTable绑定注册
const [registerTable] = tableContext;
/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
    return [
        {
            label: '编辑',
            onClick: handleEdit.bind(null, record),
        },
    ];
}

function handleEdit(record) {
    console.log(record);
}
function onReflashWxBotData() {
    reflashWxBotData()
}
/**
  * 展开事件
  * */
function handleExpand(expanded, record) {
    expandedRowKeys.value = [];
    innerData.value = [];
    if (expanded === true) {
        expandedRowKeys.value.push(record.id);
        defHttp.get({ url: "/slt/xlWxbotGroupMember/getMemsByGroupId", params: { groupId: record.groupWxid } }, { isTransformResponse: false }).then((res) => {
            if (res.success) {
                innerData.value = res.result;
            }
        });
    }
}
import { render } from "/@/utils/common/renderUtils";
// 子表表头
const innerColumns:  BasicColumn[] = [
    {
        title: 'id',
        align: 'center',
        width: 100,
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '头像',
        align: 'center',
        dataIndex: 'memAvatarMinUrl',
        slots: { customRender: 'avatarRenderer' },
    },
    {
        title: '微信ID',
        align: 'center',
        dataIndex: 'memWxid',
    },
    {
        title: '微信昵称',
        align: 'center',
        dataIndex: 'memNick',
    },
    {
        title: '群昵称',
        align: 'center',
        dataIndex: 'memGroupNick',
    },
    
];


</script>

<style scoped>

</style>